<template>
    <div class="app-container">

        <el-row :gutter="20">
            <!--科室数据-->
            <el-col :span="3" :xs="20" style="width: 15%;border-right-style: solid;border-width: 1px">
                <div class="head-container">
                    <el-input v-model="deptName" placeholder="请输入科室账号" clearable size="small"
                              prefix-icon="el-icon-search" style="margin-bottom: 20px"/>
                </div>
                <div class="head-container">
                    <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false"
                             :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all
                             highlight-current @node-click="handleNodeClick"/>
                </div>
            </el-col>
            <!--学生数据-->
            <el-col :span="20" :xs="24" style="width: 85%">
                <el-transfer filterable :filter-method="filterMethod" v-model="checkedList" :data="studentList"
                             @change="handleChange"
                             filter-placeholder="请输入学生姓名关键字" :titles="['未选择学员', '已选择学员']"
                             :button-texts="['取消', '分配']">
                    <span slot-scope="{ option }" v-html="option.label"></span>
                </el-transfer>
            </el-col>
            <span style="font-size: 20px"></span>
        </el-row>

    </div>
</template>
<script>

import {check_ids, batch_add, batch_remove_by_examId} from "@/api/score/score_ex_exam_student"
import {listStudent} from "@/api/system/student";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {deptTreeSelect} from "@/api/system/user";
import {isNotNull} from "@/utils/zzDouUtils/objUtil";

export default {
    name: "ex_exam_allot",
    components: {Treeselect},
    props: {
        form: {
            type: Object,
        },
        deptOptions: {  // 科室树选项
            type: Array,
            default: []
        },
    },
    watch: {
        // 根据账号筛选科室树
        deptName(val) {
            this.$refs.tree.filter(val);
        }
    },
    data() {
        return {
            // 科室账号
            deptId: null,
            deptName: undefined,
            studentList: [],
            checkedList: [],
            defaultProps: {
                children: "children",
                label: "label"
            }
        };
    },
    created() {
        this.getStudentList();
        this.getCheckedUserIds();
    },
    methods: {
        /** 查询已添加的学员 */
        getCheckedUserIds() {
            if (isNotNull(this.form.id)){
                check_ids(this.form.id).then(response => {
                    this.checkedList = response.rows;
                })
            }
        },
        /** 查询学生列表 */
        getStudentList() {
            this.loading = true;
            listStudent({deptId: this.deptId,pageSize:10000,pageNum:1}).then(response => {
                    this.studentList = response.rows.map(item => {
                        return {
                            key: item.userId,
                            label: `<span style="margin-right: 10px;color: #191c24">${item.nickName}</span><span style="font-size: 10px;color: #4AB7BD">(${item.dept.deptName})</span>`
                        }
                    });
                }
            );
        },
        // 筛选节点
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        // 节点单击事件
        handleNodeClick(data) {
            this.deptId = data.id;
            this.getStudentList();
        },
        filterMethod(query, item) {
            return item.label.indexOf(query) > -1;
        },
        /** 穿梭框改变事件 （当前值、数据移动的方向（'left' / 'right'）、发生移动的数据 key 数组） */
        async handleChange(value, direction, movedKeys) {
            try{
                if (direction === 'right') {//选中，为当前考试添加
                    await batch_add(this.form.id, movedKeys).then(response => {
                        this.$modal.msgSuccess("分配成功");
                    })
                } else {//取消，为当前考试删除
                    await batch_remove_by_examId(this.form.id, movedKeys).then(response => {
                        this.$modal.msgSuccess("取消成功");
                    })
                }
            }catch (e){

            }
            await this.getCheckedUserIds();
        }
    }
};
</script>
<style>
/* 穿梭框 */
.el-transfer-panel {
    width: 300px;
    height: 700px;
}

.el-transfer-panel__list.is-filterable {
    height: 700px;
}
</style>




























